<template>
	<view class="add page c00">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">

				<view class="flex flexC borb py12" @click="$refs.shopPicker.open()">
					<text class="flex1">店铺</text>
					<text class="py3 ">{{selectShop.name}}</text>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12">
					<text class="flex1">余额</text>
					<text class="py3 ">{{balance}}</text>
				</view>


				<view class="flex flexC borb py12">
					<text class="flex1">赠送人</text>
					<input v-model="mobile" class=" aliR py3" placeholder="请输入赠送人的手机号" />

				</view>
				<view class="flex flexC  py12">
					<text class="flex1">赠送金额</text>
					<input v-model="amount" type="number" class=" aliR  py3" placeholder="请输入你赠送的金额" />

				</view>

			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg57 r40" @click="showPassword()">转赠</view>
			</view>

			<uni-popup type="bottom" ref="passwordPopup" class="pwdPopup">
				<view class="bgff r10 inpbox aliC px20 py30 mx40">
					<text @click="closePopup" class="fs24 c99 px12 py6 colse">×</text>
					<view class="fs18 mb12">请输入支付密码</view>
					<view class="mb20"></view>
					<password-input :numLng='password'></password-input>
					<view @click="findpass" class="c00b fs12 mt10">找回密码</view>
				</view>
				<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
				
			</uni-popup>


			<!-- 店铺选择 -->
			<uni-popup ref="shopPicker" type="bottom">
				<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				password: '',
				mobile: '',
				amount: '',
				balance: 0,
				selectShop: null,
				shopList:[]

			};
		},
		onLoad(option) {


			this.getShopList();
		},

		onShow() {
			this.closePopup();
		},
		methods: {
			
			findpass(){
				uni.navigateTo({
					url:'../member/paypassword'
				})
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.getCharge();
			},

			getCharge() {


				let param = {
					shop_id: this.selectShop.id
				};
				let that = this;
				this.$api.getChargeInfo(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.balance = res.data.balance;

					} else {

					}
				})
			},

			getShopList() {

				let param = {
					orgId:53
				}
				let that = this;
				this.$api.moneyShopList(param).then(res => {

					if (res.code == 1) {
						this.shopList = res.data;
						if(this.shopList.length >0){
							this.selectShop = this.shopList[0];
							this.getCharge();
						}else{
							uni.showModal({
								title:"提示",
								content:"您暂无余额，无需要转赠",
								confirmText:"确定",
								showCancel:false,
								complete:function(res){
									if(res.confirm == true){
										uni.navigateBack({delta:1})
									}
								}
							})
						}
						
					} else {

					}
				})
			},

			closePopup() {
				this.$refs.passwordPopup.close();
			},

			showPassword() {
				this.$refs.passwordPopup.open()
				this.$refs.KeyboarHid.open()
			},



			onInput(val) {
				this.password = val;
				console.log(this.password)
				if (this.password.length == 6) {
					this.save();
				}
			},


			save() {

				if (this.mobile == '') {

					uni.showToast({
						title: "请填写手机号",
						icon: 'none'
					})
					return;
				}

				if (this.amount == '') {

					uni.showToast({
						title: "请填写转赠金额",
						icon: 'none'
					})
					return;
				}

				let param = {
					shop_id: this.selectShop.id,
					mobile: this.mobile,
					amount: this.amount,
					password: this.password
				};
				let that = this;
				this.$api.sendMoney(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "转赠提示",
							content: "转赠成功",
							showCancel: false,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else if(res.code== -2){
						uni.navigateTo({
							url:'../member/paypassword'
						})
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.pwdPopup {
		/deep/.uni-popup__wrapper {
			height: 90vh;
		}

		.inpbox {
			position: relative;
			margin-bottom: 55%;

			.colse {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}


	}
</style>
